<script setup lang="ts">
import { ref } from 'vue';

const isShow = ref(false)
const toggle = () => {
  isShow.value = !isShow.value
}

</script>

<template>
  <div class="app-page">

    <button @click="toggle">切换</button>
    <!-- v-show 推荐用于频繁显示和隐藏 -->
    <div v-show="isShow" class="box1">用 v-show 控制显示、隐藏</div>
    <!-- v-if 推荐不频繁切换的场景 -->
    <div v-if="isShow" class="box2">用 v-if 控制显示、隐藏</div>

  </div>
</template>

<style lang="css" scoped>
.box1 {
  width: 300px;
  height: 200px;
  background-color: palevioletred;
  margin-bottom: 20px;
}

.box2 {
  width: 300px;
  height: 200px;
  background-color: palegreen;
  margin-bottom: 20px;
}
</style>